// This file is part of OpenMediaVault.
//
// @license   http://www.gnu.org/licenses/gpl.html GPL Version 3
// @author    Volker Theile <volker.theile@openmediavault.org>
// @copyright Copyright (c) 2009-2021 Volker Theile
//
// OpenMediaVault is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// any later version.
//
// OpenMediaVault is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
@use 'sass:math';
@use '~@angular/cdk' as cdk;
@use '~@angular/material' as mat;

@import 'src/scss/defaults';

////////////////////////////////////////////////////////////////////////////////
// Initialize Material
////////////////////////////////////////////////////////////////////////////////

$omv-typography-config: mat.define-typography-config($omv-font-family-default);

@include mat.core($omv-typography-config);

$omv-light-theme-primary-palette: mat.define-palette($omv-color-corporate-palette);
$omv-light-theme-accent-palette: map-merge(
  mat.define-palette($omv-color-yellow-palette),
  (
    // https://paletton.com/#uid=11v0u0kw0v7jRCppdxByzopDWj8
    default-contrast: #988200
  )
);
$omv-light-theme-warn-palette: mat.define-palette($omv-color-red-palette);

$omv-light-theme: mat.define-light-theme(
  (
    color: (
      primary: $omv-light-theme-primary-palette,
      accent: $omv-light-theme-accent-palette,
      warn: $omv-light-theme-warn-palette
    )
  )
);

@include mat.all-component-themes($omv-light-theme);

////////////////////////////////////////////////////////////////////////////////
// Variables
////////////////////////////////////////////////////////////////////////////////

$omv-color-primary: mat.get-color-from-palette(map-get($omv-light-theme, primary));
$omv-color-primary-complementary: $omv-color-white;
$omv-color-accent: mat.get-color-from-palette(map-get($omv-light-theme, accent));
$omv-color-accent-complementary: mat.get-color-from-palette(
  map-get($omv-light-theme, accent),
  default-contrast
);

$omv-color-themes: (
  'primary': (
    background-color: $omv-color-primary,
    color: $omv-color-primary-complementary
  ),
  'accent': (
    background-color: $omv-color-accent,
    color: $omv-color-accent-complementary
  ),
  'green': (
    background-color: $omv-color-green,
    color: $omv-color-white
  ),
  'yellow': (
    background-color: $omv-color-yellow,
    color: $omv-color-accent-complementary
  ),
  'red': (
    background-color: $omv-color-red,
    color: $omv-color-white
  ),
  'blue': (
    background-color: $omv-color-blue,
    color: $omv-color-white
  ),
  'dark': (
    background-color: $omv-color-black,
    color: $omv-color-white
  ),
  'gray': (
    background-color: $omv-color-gray,
    color: $omv-color-white
  ),
  'white': (
    background-color: $omv-color-white,
    color: rgba(0, 0, 0, 0.87)
  ),
  'whitesmoke': (
    background-color: $omv-color-whitesmoke,
    color: rgba(0, 0, 0, 0.87)
  ),
  'error': (
    background-color: $omv-color-error,
    color: $omv-color-white
  ),
  'success': (
    background-color: $omv-color-success,
    color: $omv-color-white
  ),
  'info': (
    background-color: $omv-color-info,
    color: $omv-color-white
  ),
  'warning': (
    background-color: $omv-color-warning,
    color: $omv-color-white
  ),
  'terminal': (
    // https://retrocomputing.stackexchange.com/questions/12835/exactly-what-color-was-the-text-on-monochrome-terminals-with-green-on-black-and/12837#12837
    background-color: #282828,
    color: #33ff33
  )
);

////////////////////////////////////////////////////////////////////////////////
// Global
////////////////////////////////////////////////////////////////////////////////

////////////////////////////////////////////////////////////////////////////////
// Orientation
.omv-vertical-align {
  display: flex;
  align-items: center;
}

.omv-horizontal-align {
  display: flex;
  justify-content: center;
}

////////////////////////////////////////////////////////////////////////////////
// Colors
.omv-color-primary {
  color: $omv-color-primary;
}

.omv-color-accent {
  color: $omv-color-accent;
}

.omv-color-black {
  color: $omv-color-black;
}

.omv-color-gray {
  color: $omv-color-gray;
}

.omv-color-white {
  color: $omv-color-white;
}

.omv-color-green,
.omv-color-success,
.omv-color-enabled {
  color: $omv-color-success;
}

.omv-color-red,
.omv-color-error {
  color: $omv-color-error;
}

.omv-color-yellow,
.omv-color-warning {
  color: $omv-color-warning;
}

.omv-color-blue,
.omv-color-info {
  color: $omv-color-info;
}

.omv-color-primary-complementary {
  color: $omv-color-primary-complementary;
}

.omv-color-white-complementary {
  color: $omv-color-transparent-black;
}

@each $name, $map in $omv-color-themes {
  .omv-background-color-theme-#{$name} {
    color: map-get($map, color);
    background-color: map-get($map, background-color);
  }
}

.omv-background-color-theme-transparent {
  background-color: transparent;
}

.omv-background-color-theme-tip {
}

// mat-chip colors must use '!important' to get them applied.
@each $name, $map in $omv-color-themes {
  .omv-chip-theme-#{$name} {
    color: map-get($map, color) !important;
    background-color: map-get($map, background-color) !important;
  }
}

////////////////////////////////////////////////////////////////////////////////
// Cursors
.omv-cursor-pointer {
  cursor: pointer;
}

////////////////////////////////////////////////////////////////////////////////
// Display
.omv-display-none {
  display: none !important;
}

////////////////////////////////////////////////////////////////////////////////
// Text
.omv-text-center {
  text-align: center !important;
}

.omv-text-monospace {
  font-family: $omv-font-family-monospace !important;
}

.omv-text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.omv-text-wrap {
  white-space: pre;
}

.omv-text-nowrap {
  white-space: nowrap;
}

.omv-text-decoration-none {
  text-decoration: none !important;
}

.omv-text-bold {
  font-weight: bold;
}

.omv-text-muted {
  color: $omv-color-transparent-black;
}

////////////////////////////////////////////////////////////////////////////////
// Icon
.omv-icon-sm {
  height: 0.875rem !important;
  width: 0.875rem !important;
  flex-shrink: 0;
}

.omv-icon-2x {
  height: 2rem !important;
  width: 2rem !important;
  flex-shrink: 0;
}
// Use this when the background color is white.
.omv-icon-color-default {
  color: rgba(0, 0, 0, 0.54);
}

////////////////////////////////////////////////////////////////////////////////
// Scrollbar
@mixin omv-scrollbar {
  scrollbar-color: $omv-color-primary transparent;
  scrollbar-width: thin;

  --scrollbar-border-radius: 0 !important;
  // Using variables does not work somehow.
  // --scrollbar-thumb-color: $omv-color-primary;
  --scrollbar-thumb-color: #5dacdf !important;
  --scrollbar-thumb-hover-color: var(--scrollbar-thumb-color) !important;
}

.omv-scrollable-xy,
.omv-scrollable-y {
  @include omv-scrollbar;
}

.omv-scrollable-xy {
  overflow: auto;
}

.omv-scrollable-y {
  overflow-x: hidden;
  overflow-y: auto;
}

////////////////////////////////////////////////////////////////////////////////
// Customize HTML elements
////////////////////////////////////////////////////////////////////////////////

html,
body {
  height: 100%;
}

body {
  background-color: $omv-color-corporate-light;
  font-family: mat.font-family($omv-typography-config);
  margin: 0;
}

////////////////////////////////////////////////////////////////////////////////
// Links
a {
  color: inherit;
}

////////////////////////////////////////////////////////////////////////////////
// Textarea
textarea {
  @include omv-scrollbar;
}

////////////////////////////////////////////////////////////////////////////////
// Customize Material
////////////////////////////////////////////////////////////////////////////////

////////////////////////////////////////////////////////////////////////////////
// Select
.mat-select-panel {
  @include omv-scrollbar;
}

////////////////////////////////////////////////////////////////////////////////
// Checkbox
// Workaround for https://github.com/angular/components/issues/8416
.mat-checkbox-layout {
  white-space: normal !important;
}

////////////////////////////////////////////////////////////////////////////////
// Menu
.mat-menu-panel {
  @include omv-scrollbar;
}

.mat-menu-item {
  border-left: 0.25rem solid transparent !important;

  &.active {
    border-left: 0.25rem solid $omv-color-corporate-default !important;
  }

  &:hover {
    border-left: 0.25rem solid $omv-color-yellow !important;
  }
}

////////////////////////////////////////////////////////////////////////////////
// Sidenav
.mat-sidenav-container {
  height: 100%;
  background-color: map-get($omv-color-gray-palette, 50);
}

.mat-sidenav {
  background-color: map-get($omv-color-gray-palette, 500);

  .mat-list-base .mat-list-item {
    color: $omv-color-white;
  }
}

////////////////////////////////////////////////////////////////////////////////
// Dialog
.mat-dialog-content {
  font-family: mat.font-family($omv-typography-config);
  font-size: mat.font-size($omv-typography-config, body-1);
}

////////////////////////////////////////////////////////////////////////////////
// Card
.mat-card-actions {
  .mat-button-base:not(:last-child) {
    margin-right: 0.5rem;
  }
}

////////////////////////////////////////////////////////////////////////////////
// Buttons
.mat-button-toggle.mat-button-toggle-checked {
  @extend .omv-background-color-theme-accent;
}

////////////////////////////////////////////////////////////////////////////////
// Forms
// Workaround for https://github.com/angular/material2/issues/4580.
@mixin mat-form-field-multiline-workaround($typography-config) {
  .mat-form-field {
    // Copy-paste from @mat-form-field-typography();
    $line-height: mat.line-height($typography-config, input);
    $subscript-font-scale: 0.75;

    & & {
      &-underline {
        position: static;
      }

      &-subscript-wrapper {
        $subscript-margin-top: math.div(0.5em, $subscript-font-scale);
        $subscript-min-height: $line-height * 1em;
        $subscript-margin-bottom: -#{$subscript-margin-top + $line-height};

        position: static;
        min-height: $subscript-min-height;
        margin-bottom: $subscript-margin-bottom;
      }
    }

    &-appearance-legacy &-subscript-wrapper {
      // Copy-paste from @mat-form-field-legacy-typography();
      $line-spacing: ($line-height - 1) * 0.5;
      $subscript-margin-top: math.div(0.5em, $subscript-font-scale) - ($line-spacing * 2);

      $subscript-min-height: $line-height * 1em;
      $subscript-margin-bottom: -#{$subscript-margin-top + $line-height};

      min-height: $subscript-min-height;
      margin-bottom: $subscript-margin-bottom;
    }
  }
}

@include mat-form-field-multiline-workaround($omv-typography-config);

.mat-form-field-suffix .mat-icon,
.mat-form-field-prefix .mat-icon {
  color: $omv-color-transparent-black;
  // Suffix/Prefix icons are aligned too high by default.
  vertical-align: bottom;
}

////////////////////////////////////////////////////////////////////////////////
// Customize BlockUI
////////////////////////////////////////////////////////////////////////////////
.block-ui-wrapper {
  background: $omv-color-transparent-black !important;
  cursor:
    url(''),
    auto !important;
}

////////////////////////////////////////////////////////////////////////////////
// Customize ngx-scrollbar
////////////////////////////////////////////////////////////////////////////////
.ng-scrollbar {
  @include omv-scrollbar;
}

////////////////////////////////////////////////////////////////////////////////
// Customize Toastr
////////////////////////////////////////////////////////////////////////////////
.toast-container {
  font-family: mat.font-family($omv-typography-config);
  font-size: mat.font-size($omv-typography-config, body-1);

  .ngx-toastr {
    box-shadow: unset;

    &:hover {
      box-shadow: unset;
    }
  }
}

.toast-error {
  background-color: $omv-color-error;
}

.toast-success {
  background-color: $omv-color-success;
}

.toast-info {
  background-color: $omv-color-info;
}

.toast-warning {
  background-color: $omv-color-yellow;
}

////////////////////////////////////////////////////////////////////////////////
// Swimlane ngx-charts
////////////////////////////////////////////////////////////////////////////////
ngx-charts-gauge {
  font-size: mat.font-size($omv-typography-config, body-1);
}

ngx-charts-advanced-pie-chart {
  .advanced-pie-legend {
    .legend-items-container .legend-items {
      overflow: initial;

      .legend-item {
        .item-value {
          font-size: mat.font-size($omv-typography-config, body-1);
        }

        .item-label {
          font-size: mat.font-size($omv-typography-config, caption);
        }

        .item-percent {
          font-size: mat.font-size($omv-typography-config, body-1);
        }
      }
    }

    .total-value {
      font-size: mat.font-size($omv-typography-config, subheading-2);
    }

    .total-label {
      font-size: mat.font-size($omv-typography-config, body-1);
    }
  }
}

////////////////////////////////////////////////////////////////////////////////
// Customize openmediavault components & directives
////////////////////////////////////////////////////////////////////////////////

////////////////////////////////////////////////////////////////////////////////
// Datatable
.omv-datatable-cell-title {
  font-weight: mat.font-weight($omv-typography-config, title);
  font-size: mat.font-size($omv-typography-config, title);
}

.omv-datatable-cell-subtitle {
  font-size: mat.font-size($omv-typography-config, subheading-2);
}

////////////////////////////////////////////////////////////////////////////////
// Customize 'sticky' directive
.omv-sticky {
  position: sticky;
  top: 0;
  overflow: hidden;
  z-index: cdk.$overlay-z-index + 1;
  box-shadow:
    0 2px 1px -1px rgba(0, 0, 0, 0.2),
    0 1px 1px 0 rgba(0, 0, 0, 0.14),
    0 1px 3px 0 rgba(0, 0, 0, 0.12);
}
